<template>
  <div class="course-read">

    <loading-page after-loading-page="playContentPageVoice"
                  background-color="https://fangti-mcdn.oss-cn-beijing.aliyuncs.com/appstatic/background/bg_read.png"
                  img="pic_read@2x1.png">
      <template>
        <div class="course-read-detail">
          <nav-bar
            class="nav-bar-position"
          >
            读一读 {{ current + 1 > lessonDetail.count ? lessonDetail.count :current + 1 }} / {{lessonDetail.count}}

          </nav-bar>
          <white-space/>

          <div class="course-read-progress-wrap">
            <div :class="'bean-width-'+lessonDetail.count * 2" class="course-read-progress">
              <div
                :class=" ['bean-'+ (index + 1) ,{'gray-filter':  progress * 2 - 1 < index && bean_current * 2 - 1  < index}]"
                :key="index"
                class="icon-wrap"
                v-for="(bean,index) in lessonDetail.count * 2">
                <my-img class-name="ico-beans" src="ico_beans@2x.png"/>
              </div>
            </div>
          </div>


          <div class="poster-wrap">
            <div class="center-wrap">
              <div class="poster">
                <my-img :src="lessonDetail.info[current].picture" class-name="read-poster"/>
                <div class="footer">
                  <my-img
                    @tap="playContentPageVoice({isAutoPlay:false})"
                    class-name="ico_voice_d"
                    src="ico_voice_d@2x.png"
                    v-if="currentPlayState !== 'record'"
                  />
                  <my-img class-name="ico_voice_d" src="_voice.gif" v-else/>
                  <p class="question">{{ lessonDetail.info[current].content }}</p>
                </div>
              </div>
            </div>
          </div>

          <record @next="_playNextVoice"/>

        </div>

        <div
          :animation="animation"
          :style="{'z-index':!animationShow?'-199999':'999999999999999999'}"
          class="b-start"
        >
          <my-img
            :src="'b123.gif?' + current"
            class-name="b-start-png"
            v-if="!isAnimationEnd && animationShow"
          />
          <my-img
            :src="'get_bean.gif?' + current"
            class-name="btn-rec-ico fiddle"
            v-else-if="isAnimationEnd && animationShow"
          />
        </div>
      </template>
    </loading-page>
  </div>
</template>

<script>
  import { mapActions, mapState } from 'vuex'
  import { RedirectTo } from "../../utils/router";

  import Record from '../../component/record/record'
  import LoadingPage from "../../component/loading-page/loading-page";

  export default {
    name: "course_read",
    components: {
      LoadingPage,
      Record,
    },
    data() {
      return {
        progress: 0
      }
    },
    computed: {
      ...mapState('Course', ['lessonDetail']),
      ...mapState('Tools', ['currentVoicePath', 'currentPlayState', 'voicePlay', 'isAnimationEnd', 'animationShow', 'animation', 'current', 'bean_current'])
    },
    methods: {
      ...mapActions('Course', ['reqLessonDetail']),
      ...mapActions('Tools', ['playContentPageVoice', 'stopPlay', 'playNextVoice', '_pause', '_continuePlaying']),
      _playNextVoice() {
        this.playNextVoice({ target: this, count: this.lessonDetail.count * 2 })
      },
      RedirectTo,
    },
    async onLoad(query) {
      const { id, type_id, progress } = query;
      this.id = id;
      this.type_id = type_id;
      this.progress = progress;
      await this.reqLessonDetail({ id, type_id });
    },

    onUnload() {
      this.stopPlay()
    },

    onShow() {
      this._continuePlaying()
    },
    onHide() {
      this._pause()
    }
  }
</script>

<style lang="scss">
  @import "../../uni";

  .ico-s {
    width: upx(258) !important;
    height: upx(258) !important;
  }

  .course {
    &-read {
      &-detail {
        background: #fff;
      }

      .course-read-progress-wrap {
        height: upx(70);
        z-index: 99999999999;
        position: relative;
        background: linear-gradient(-309deg, #46DBB4 0%, #3BB6BC 100%);
      }

      &-progress {
        position: relative;
        top: upx(20);
        left: 0;
        right: 0;
        margin: auto;
        background: white;
        box-shadow: 0 upx(4) upx(28) 0 rgba(122, 137, 130, 0.18);
        border-radius: upx(200);
        display: flex;
        justify-content: space-between;
        padding: upx(8);

        .icon-wrap {
          width: upx(80);
          height: upx(80);
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(309deg, rgba(9, 182, 188, 1) 0%, rgba(0, 224, 180, 1) 100%);
          border-radius: 50%;
        }

        .ico-beans {
          width: upx(44);
          height: upx(38);
        }
      }


      .btn-rec {
        text-align: center;

        &-ico {
          width: upx(142);
          height: upx(142);
        }

        p {
          margin-top: upx(-30);
          @include ft(28, #C7CCD5, 500)
        }
      }

      .poster-wrap {
        position: relative;
        width: upx(550 + 120);
        height: upx(620-80-40);
        margin: upx(185) auto upx(125);
        border-radius: upx(32);
        background: #F1F3F6;

        .center-wrap {
          position: absolute;
          width: upx(550 + 60);
          height: upx(628);
          left: 0;
          right: 0;
          margin: upx(-60) auto;
          border-radius: upx(32);
          background: #DFE3EB;

          .poster {
            position: absolute;
            left: 0;
            right: 0;
            margin: upx(-60) auto;
            width: upx(550);
            height: upx(730);
            border-radius: upx(32);
            overflow: hidden;
          }

          .read-poster {
            width: upx(550);
            height: upx(730);
            border-radius: upx(32);
            overflow: hidden;
          }

          .footer {
            width: 100%;
            height: upx(84);
            padding: upx(18) upx(32);
            background: rgba(0, 0, 0, 0.6);
            position: absolute;
            bottom: 0;
            box-sizing: border-box;

            display: flex;
            align-items: center;

            .question {
              @include ft(32, #fff, 500);
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              max-width: upx(436);
            }

            .ico_voice_d {
              margin-right: upx(24);
              width: upx(48);
              height: upx(48);
            }
          }
        }
      }
    }


  }
</style>
